<template>
    <div>
        <el-card>
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.mch" placeholder="请输入代理商ID"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.sn" placeholder="请输入单号"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.third_trade_no" placeholder="请输入第三方单号"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.paymodel" placeholder="请选择支付方式" clearable :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="微信" value="1"></el-option>
                        <el-option label="支付宝" value="2"></el-option>
                        <el-option label="苹果内购" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.user_id" placeholder="请输入用户ID"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="未支付" value="1"></el-option>
                        <el-option label="已支付" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="sn"
                        label="订单号">
                </el-table-column>
                <el-table-column
                        label="用户信息">
                    <template slot-scope="scope">
                        <div class="img">
                            <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30">
                            <div>
                                <p>{{scope.row.userInfo.id}}</p>
                                <p>{{scope.row.userInfo.nickname}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="代理信息">
                    <template slot-scope="scope">
                        <div class="img">
                            <div>
                                <p>{{scope.row.mchInfo.id}}</p>
                                <p>{{scope.row.mchInfo.name}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="充值金额">
                </el-table-column>
                <el-table-column
                        prop="smoney"
                        label="赠送金额">
                </el-table-column>
                <el-table-column
                        prop="lv"
                        label="+比例">
                </el-table-column>
                <el-table-column
                        prop="third_trade_no"
                        label="第三方支付单号">
                </el-table-column>
                <el-table-column
                        prop="isyear"
                        label="支付方式">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paymodel==1">微信</span>
                        <span v-if="scope.row.paymodel==2">支付宝</span>
                        <span v-if="scope.row.paymodel==3">苹果内购</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == 2">已支付</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 1">未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pay_time"
                        label="支付时间">
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :layout="this.$store.state.paginationLayout"
                        :total="params.totals">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
  import {formatDate} from '../../utils/common'

  export default {
    name: "User",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0
        },
        form: {
          subscribe: '',
          charge: '',
          nickname: '',
        },
        dataForm: {
          title: '',
          name: '',
          username: '',
          tpassword: '',
          phone: '',
          weixin: '',
          lv: '',
          qq: '',
          onums: '',
          desc: '',
          receiptmodel: '',
          bank: '',
          bankname: '',
          bankno: '',
          account: '',
          realname: '',
          status: '',
        },
        imgData: {},
        domain: '',
        tableData: [],
        fromTitle: '',
        visible: false,
        imageUrl: '',
        id: '',
        searchForm: {
          sn: '',
          third_trade_no: '',
          paymodel: '',
          user_id: '',
          status: '',
          mch: '',
          start_time: '',
          end_time: ''
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
          sn: this.searchForm.sn,
          third_trade_no: this.searchForm.third_trade_no,
          paymodel: this.searchForm.paymodel,
          user_id: this.searchForm.user_id,
          status: this.searchForm.status,
          mch: this.searchForm.mch,
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time
        };
        this.$axios.post("mch/agent/charge", data).then((res) => {
          this.params.totals = parseInt(res.data.count);
          this.tableData = res.data.list;
          this.tableData.map((num) => {
            num.pay_time = formatDate(num.pay_time)
          })
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList()
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList()
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
    }
  }
</script>

<style scoped>
    .img {
        display: flex;
        align-items: center;
    }

    .img > img {
        margin-right: 10px;
    }
</style>